<template>
  <div class="user-card">
      <CoverUpload
      class="avatar-uploader"
        v-model="userInfo.imageUrl"
        :width="150"
        :height="150"
        :type="2"
      ></CoverUpload>
    <h2 class="username">{{ userInfo.userName }}</h2>
    <p class="bio">{{ userInfo.bio || '这个人很懒，什么都没留下' }}</p>
    <div class="user-meta">
      <div class="meta-item">
        <label>邮箱：</label>
        <span>{{ userInfo.email || '未设置' }}</span>
      </div>
      <div class="meta-item">
        <label>电话：</label>
        <span>{{ userInfo.phone || '未设置' }}</span>
      </div>
      <div class="meta-item">
        <label>职位：</label>
        <span>{{ userInfo.position || '未设置' }}</span>
      </div>
      <div class="meta-item">
        <label>角色名称：</label>
        <span>{{ userInfo.roleNames || '未设置' }}</span>
      </div>
      <div class="meta-item">
        <label>性别：</label>
        <span>{{ userInfo.gender==0?'女':'男' || '未设置' }}</span>
      </div>
      <div class="meta-item">
        <label>注册时间：</label>
        <span>{{ userInfo.createTime || '未设置' }}</span>
      </div>
    </div>
    <el-button  style="margin-top: 10px;" type="primary" plain @click="showEdit">
      编辑资料
    </el-button>
    <el-button  style="margin-top: 10px;" type="primary" plain @click="saveImage">
      保存头像
    </el-button>
  </div>

  <UserInfoEdit ref="userEditRef" @reload="loadUserInfo"></UserInfoEdit>
</template>

<script setup>
import {
        Document,
        Timer,
        Notification,
        ChatDotRound,
        Edit } from '@element-plus/icons-vue'
        import { ref,shallowRef, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();
import UserInfoEdit from "./UserEdit.vue"
// 用户信息示例
const userInfo = ref({
  userId:1,
  avatar: 'https://example.com/avatar.jpg',
  nickname: '心理咨询师张伟',

})


const loadUserInfo = async () => {
  let result = await proxy.Request({
    url: "/loadMyInfo",

  });
  if (!result) {
    return;
  }
  userInfo.value=result.data;
};
loadUserInfo();

const userEditRef=ref({});
const showEdit=()=>{
  userEditRef.value.showEdit(userInfo.value);
}
// 保存头像
const saveImage=async()=>{
  let result = await proxy.Request({
    url: "/saveImage",
    params:{
        imageUrl:userInfo.value.imageUrl
    }
  });
  if (!result) {
    return;
  }
  proxy.Message.success("保存成功");
}


</script>

<style lang="scss" scoped>
.user-card {
      padding: 20px;
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
      border-radius: 8px;
      text-align: center;

      .avatar-uploader {
        margin-bottom: 15px;
        position: relative;

        .edit-tip {
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 12px;
          color: #666;
        }
      }

      .username {
        margin: 15px 0;
        color: #333;
      }

      .bio {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
        min-height: 60px;
      }
      .meta-item{
        margin-top: 4px;
      }
    }
</style>
